<template>
  <div v-loading="loading" class="price-rules">
    <div class="app-main-tips-box">
      <div class="title">
        <i class="el-icon-warning" /> 温馨提示
      </div>
      <ul>
        <li>1.已设当日价格的日期不受价格规则设置的影响。</li>
        <li>2.如某天有重复的价格规则，则按较低的价格实行。最终实行价格以价格日历显示为准，请在价格日历确认。</li>
      </ul>
    </div>

    <!-- 列表 -->
    <div>
      <!-- 筛选 -->
      <div class="flexRBC list-search">
        <div class="search-item">
          <el-input
            v-model="filterForm.name"
            size="medium"
            style="margin-right:20px"
            placeholder="请输入规则名称搜索"
            @keyup.enter.native="searchByKeyword"
          />
          <el-button
            type="primary"
            size="medium"
            round
            icon="el-icon-search"
            @click="searchByKeyword"
          >查 询</el-button>
        </div>

        <el-button type="primary" round size="medium" @click="add">新增规则</el-button>
      </div>

      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="name" label="规则名称" />
          <el-table-column label="有效期">
            <template slot-scope="scope">
              <span>{{ scope.row.beginDay }}到{{ scope.row.endDay }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="priceRuleValue" label="价格/元">
            <template slot-scope="scope">
              <span>{{ scope.row.priceRuleValue/100 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dayRule" label="规则">
            <template slot-scope="scope">
              <span v-if="scope.row.dayRule==1">
                <span v-for="(item,index) in weekOptions" :key="index">
                  <span v-if="scope.row.activeDays.split(',').includes(item.value)">{{ item.label }}</span>
                </span>
              </span>
              <span v-else>每月{{ scope.row.activeDays }}日</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" />
          <el-table-column prop="operator" label="操作人" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>

    <!-- 规则弹框 -->
    <DialogEditRules ref="editRules" />
  </div>
</template>

<script>
import DialogEditRules from './DialogEditRules'
import { getPriceRuleList, delPriceRule } from '../../../api/product'
export default {
  components: {
    DialogEditRules
  },
  props: {
    productInfo: {
      require: Object
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 20 // 每页条数-默认10
      },
      weekOptions: [
        {
          label: '周一',
          value: '2'
        },
        {
          label: '周二',
          value: '3'
        },
        {
          label: '周三',
          value: '4'
        },
        {
          label: '周四',
          value: '5'
        },
        {
          label: '周五',
          value: '6'
        },
        {
          label: '周六',
          value: '7'
        },
        {
          label: '周日',
          value: '1'
        }
      ],
      // 状态
      loading: false, // loading
      // 数据
      list: [],
      filterForm: {
        name: ''
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      this.filterForm.productId = this.productInfo.id
      this.loading = true
      getPriceRuleList(this.filterForm)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    // 查询
    searchByKeyword() {
      this.searchLoading = true
      this.initData(1)
    },

    // 新增
    add() {
      this.$refs.editRules
        .open({ mode: 'add', productInfo: this.productInfo })
        .then(() => {
          this.initData()
        })
    },

    // 编辑
    edit(row) {
      this.$refs.editRules
        .open({ mode: 'edit', productInfo: this.productInfo, row })
        .then(() => {
          this.initData()
        })
    },

    // 按钮
    del(row) {
      this.$confirm(`是否删除规则：${row.name}`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          const params = {
            ruleId: row.id
          }
          this.loading = true
          delPriceRule(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.initData()
            })
            .catch(() => {})
            .finally(() => {
              this.loading = true
            })
        })
        .catch(() => {})
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 搜索 */
  .list-search {
    margin: 20px 0;
    .search-item {
      display: flex;
    }
  }
</style>
